<template>
<div class='banner-container' @mouseenter="autoStop" @mouseleave="autoStart">
    <!-- <ul class="images" style="width:300%"> ,-->
    <ul class="images" :style="{width:banners.length*100+'%',marginLeft:-index*100+'%',}">
        <li v-for="(item, i) in banners" :key="i"><a :href="item.link" target="_blank"><img :src="item.url" alt=""></a></li>
        <!-- <li><a href=""><img src="@/assets/banderBB.png" alt=""></a></li> -->
    </ul>
    <ul class="dots">
        <!-- <li v-for="(item, i) in banners" :key="i" class="active"></li> -->   
        <li v-for="(item, i) in banners" :key="i" :class="{active:i===index}" @click="index=i"></li>  <!-- 注意此项是轮播图下边的小点点，显示\点击切换等 上边一行是原始的 -->
    </ul>
</div>
  
</template>
<script>
export default {
    // props:["banners"]
    props:{
        banners:{type:Array,  //属性类型是数组
        required:true}       //必须要传递该属性
    },
created(){
    this.autoStart()
    },

data(){
    return{
        index:0, //当前显示是第几张图片
        timer:null,     //计时器
    }
},

methods:{
    //自动开始切换轮播图
    autoStart(){ 
        if (this.timer){return;}
        this.timer=setInterval(()=>{
            this.index=(this.index+1) % this.banners.length;
        },3000)

     },
//停止自动切换
autoStop(){
    clearInterval(this.timer);
    this.timer=null;
}

    },

}
</script>


<style scoped>

*{
    padding: 0;
    margin: 0 auto;
    /* width: 100%; */
}
.banner-container{
    height: 70px;
    position: relative;
    overflow: hidden;
}
.banner-container li{
    display: inline-block;
    height: 100%;
    flex: 1;
}
.images{
height: 100%;
transition: 0.5s;
width: 100%;
display: flex;
}
.banner-container img{
    width: 120%;
    height: 100%;
}
.dots{
    position:absolute;
    bottom: 10px;
    right: 10px;
}
.dots li{
    width: 10px;
    cursor: pointer;
    height: 10px;
    margin: 0 3px;
    border-radius: 50%;
    border:1px solid;
    color:#fff;
}
.dots li.active{
    background: #fff;
}

</style>